<template>
  <div class="admin-login_item7">
    <div class="item7-strol">
       <div class="item7-strol-title">登录</div>
       <div class="item7-strol-gotta">用户名</div>
       <input class="item7-strol-mtsg" v-model="user.username" placeholder="" />
       <div class="item7-strol-gotta">密码</div>
       <input class="item7-strol-mtsg" v-model="user.password" type="password" placeholder="" />
       <div class="item7-load">
         <el-button class="buton-action" @click="OnSubmit" :loading="loading">登录</el-button>
       </div>
    </div>
  </div>
</template>

<script>
  export default {
     data() {
       return {
         loading: false,  
         user: {
         	username: '',
         	password: ''
         }
       }
     },
     mounted() {
     	this.init()
     },
     methods: {
       async OnSubmit() { 
        this.loading = true
        await this.$ala.userLogin(this.user)
        this.loading = false
        await this.$emit('afterLogin')
       }
     }
   }
</script>

<style lang="scss">
  .admin-login_item7{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1300px;
    // display: flex;
    // flex-direction: row;
    background: url("https://diyapi.5ug.com/wwwroot/uploads/api/256-116-382/2022-02-17/620e0e12051295f55528a685.png");
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .item7-strol{
      padding:50px 20px;
      border-radius: 5px;
      background-color: #071639;
      display: flex;
      flex-direction: column;
      top: 25%;
      left: 16%;
      position: absolute;
      .item7-strol-title{
        // padding-left: 70px;
        color: #FFFFFF;
        font-size: 30px;
      }
      .item7-strol-gotta{
        margin-top: 20px;
        font-size: 16px;
        color: rgba(#ffffff,0.5);
      }
      .item7-strol-mtsg{
        outline:none;
        color:#FFFFFF;
        width: 300px;
        background-color: rgba(#071639,0.2);
        font-size: 14px;
        padding: 10px 10px;
        line-height: 20px;
        border-bottom: 1px solid rgba(#ffffff, 0.5);
      }
      .item7-load{
        font-size: 20px;
        width: 300px;
        margin-top: 30px;
        .buton-action {
          font-size: 20px;
          background:linear-gradient(left, #43A0DF,#3434AC);
          color: #ffffff;
          width: 300px;
          padding: 12px 0px;
          border-radius: 5px;
        }
      }
      .item7-load span{
        font-size: 16px;
        letter-spacing:6px
      }
    }
  }
</style>
